<template>
  <main>
    <div class="Top">
      <span @click="paiSize">字数▼</span>
      <span @click="paiShou">收藏▼</span>
    </div>
    <div class="A">
    <li v-for="item in bookList" :key="item._id">
      <img :src="item.avatar" alt="404" />
      <div class="B">
        <h3 @click="toBook(item._id)">{{item.bookname}}</h3>
        <h4 @click="toWriter(item.writerid)">{{item.writername}} 著</h4>
        <h6 v-if="item.isend == 0">连载中</h6>
        <h6 v-if="item.isend == 1">完结</h6>
      </div>
    </li>
    </div>
    <!-- 分页 -->
    <div class="block">
      <span class="demonstration">共有{{ isLength }}条记录</span>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        layout="prev, pager, next, jumper"
        :page-size="10"
        :total="isLength"
      >
      </el-pagination>
    </div>
  </main>
</template>

<script>
export default {
  created() {
    this.getThisClassBook();
  },
  data() {
    return {
      bookList: [],
      isLength:0,
      currentPage: 1,
      pageSize:10,
    };
  },
  methods: {
      toBook(id){
      let routeUrl = this.$router.resolve(`/tobook/${id}`);
      window.open(routeUrl.href, "_blank");
    },
    toWriter(id){
      let routeUrl = this.$router.resolve(`/toWriter/${id}`);
      window.open(routeUrl.href, "_blank");
    },
    async getThisClassBook() {
      const { data: res } = await this.$http.post("/books/getBookByClass", {
        class: this.$route.params.id,pageSize:this.pageSize,currentPage:this.currentPage
      });
      this.isLength = res.num;
      this.bookList = res.data;
      //console.log(this.bookList);
    },
    handleCurrentChange(val){
        this.currentPage = val;
        this.getThisClassBook();
    },
    async paiSize(){
      const { data: res } = await this.$http.post("/books/getBookByClassSize", {
        class: this.$route.params.id,pageSize:this.pageSize,currentPage:this.currentPage,
      });
      this.isLength = res.num;
      this.bookList = res.data;
    },
    async paiShou(){
            const { data: res } = await this.$http.post("/books/getBookByClassShou", {
        class: this.$route.params.id,pageSize:this.pageSize,currentPage:this.currentPage,
      });
      this.isLength = res.num;
      this.bookList = res.data;
    }
  },
};
</script>

<style lang="less" scoped>
main {
  height: 2600px;
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
}
.Top{
  height: 100px;
  width: 100%;
  font-size: 25px;
}
.Top span{
  margin-left: 25px;
}
.Top span:hover{
  color: blue;
  cursor: pointer;
}
.A{
    height: 2440px;
    display: flex;
    align-items: center;
    flex-direction: column;
}
li {
  list-style: none;
  height: 400px;
  width: 600px;
  display: flex;
  align-items: center;
  border-style: solid;
  border-width: 1px;
  margin: 3px;
}
img {
  height: 240px;
  width: 180px;
  border-style: solid;
  border-width: 1px;
  margin: 3px;
}

.B{
  width: 400px;
  height:260px;
  display: flex;
  flex-direction: column;
}
h3:hover{
  color: blue;
  cursor: pointer;
}
h4:hover{
  color: blue;
  cursor: pointer;
}
</style>
